<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>乐在自学</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/topbar.css">
    <link rel="stylesheet" href="/static/css/allClass.css">
    <script src="/static/layui/layui.js"></script>
</head>

<body>
<!-- 头部引入 -->
<div th:insert="~{_topbar :: topbar}" id="topbar"></div>
<div class="nav-container">
    <div style="height: 10px;clear: both;"></div>
    <div class="layui-container">
        <div class="layui-row">

            <!--            面包屑导航-->
            <div class="layui-col-xs9">
                <blockquote class="layui-elem-quote layui-quote-nm">
   <span class="layui-breadcrumb" lay-separator="-">
                    <a><cite>搜索结果</cite></a>
                    <a th:href="${cru.link}" th:each="cru : ${result.crumbs}"><b th:text="${cru.crumbName}"></b>:<span th:text="${cru.crumbValue}"></span><em style="color: orangered">×</em></a>
                  <a><cite th:text="${param.keyword}"></cite></a>
                </span>
                </blockquote>

            </div>
            <div class="layui-col-xs3">
                <!--            分类导航-->
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-card">
                <div class="layui-card-body">
                    <!-- 第1行 -->
                    <div class="layui-row">
                        <div class="layui-col-xs1">
                            <div class="filter-title-wrapper">
                                <span class="filter-title"><b>分类：</b></span></div>
                        </div>
                        <div class="layui-col-xs11">
                            <div class="filter-item-wrapper" th:with="cat = ${param.category}">
                                <!--                                <a class="filter-item active" href="javascript:searchCourse('category','')">全部</a>-->
                                <a class="filter-item"
                                   th:each="catalog:${result.catalogVos}"
                                   th:text="${catalog.categoryName}"
                                   th:classappend="((${!#strings.isEmpty(cat)}) and (${#strings.substringAfter(cat,'f1000')} == ${catalog.categoryId}))?'active':''"
                                   th:href="${'javascript:searchCourse(&quot;category&quot;,&quot;f1000'+catalog.categoryId+'&quot;)'}"
                                >后端开发</a>

                            </div>
                        </div>
                    </div>
                    <!-- 第2行 -->
                    <div class="layui-row" th:each="attr : ${result.attrs}"  th:if="${!#lists.contains(result.attrIds,attr.attrId)}">
                        <div class="layui-col-xs1">
                            <span th:text="${attr.attrName}+'：'">属性:</span></div>
                        <div class="layui-col-xs11">
                            <div class="filter-item-wrapper filter-tag-wrapper relative col-md-11 is-folded-state">
                                <!--                                <span class="filter-item active">全部</span>-->
                                <a class="filter-item"
                                   th:each="val : ${attr.attrValue}"
                                   th:text="${val}"
                                   th:href="${'javascript:attrSearchCourse(&quot;attrs&quot;,&quot;'+attr.attrId+'_'+val+'&quot;)'}"
                                >Python</a>
                                <!-- 课程不够隐藏，课程超出了预定高度，显示 -->
                                <!--                                <button type="button" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary btn-folded-toggle">-->
                                <!--                                    <i class="layui-icon layui-icon-down"></i>更多</button>-->
                            </div>
                        </div>
                    </div>
                </div>
                <hr class="layui-bg-blue">
                <div style="height: 10px;"></div>
                <div class="layui-card-header">
                    <div class="layui-row">
                        <div class="layui-col-xs2" th:with="p = ${param.sort}">
                            <button type="button"
                                    class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary sort-l"
                                    sort=""
                                    th:attr="style=${#strings.isEmpty(p) ?'background: orangered; color: aliceblue;' : ''}">
                                综合
                            </button>
                            <!--                            <button type="button" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-warm sort-l">最新 -->
                            <!--                            </button>-->
                            <button type="button"
                                    class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary sort-l"
                                    sort="courseHeat"
                                    th:classappend="${(!#strings.isEmpty(p) && #strings.startsWith(p,'courseHeat') && #strings.endsWith(p,'desc'))?'desc':''}"
                                    th:attr="style=${(!#strings.isEmpty(p) && #strings.startsWith(p,'courseHeat'))?'background: orangered; color: aliceblue;' : ''}">
                                热度 <span th:if="${(!#strings.isEmpty(p) && #strings.startsWith(p,'courseHeat'))}">[[${(!#strings.isEmpty(p) && #strings.startsWith(p,'courseHeat') && #strings.endsWith(p,'desc'))?'↓':'↑'}]]</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space30">
            <!--            课程-->
            <div class="layui-col-md3 layui-col-sm4" th:each="course : ${result.getCourses()}">
                <div class="cmdlist-container">
                    <a th:href="|http://lyfx.com/mylearn/${course.courseId}|">
                        <img th:src="${course.classImg}" alt=""></a>
                    <a th:href="|http://lyfx.com/mylearn/${course.courseId}|">
                        <div class="cmdlist-text relative">
                            <div class="content relative">
                                <p class="info" th:utext="${course.name}">Python3教程</p>
                                <p class="describe" th:text="${course.descript}">
                                    <!-- 鼠标放上去，内容显示 -->简明易懂的 Python3 课程， 不仅适用于那些有其它语言基础的同学， 对没有编程经验的同学也非常友好。 本课程不仅讲解了
                                    Python3 基础知识， 还介绍了 PEP8、Virtualenv、测试、项目结构以及 Flask 相关内容</p></div>
                            <span class="flow">
                    <i class="layui-icon layui-icon-rate"></i>
                                <!-- 点击次数 -->[[${course.courseHeat}]]</span></div>
                    </a>
                </div>
            </div>
            <!--            分页-->
            <div class="layui-col-md12 layui-col-sm12" style="text-align: center;">
                <div id="pageHeper">
                    <div class="layui-box layui-laypage layui-laypage-default" id="layui-laypage-24">
                        <span class="layui-laypage-count">共 [[${result.total}]] 条</span>
                        <a href="javascript:;" class="layui-laypage-prev page-l"
                           th:attr="data-page=${result.pageNum - 1}"
                           th:classappend="${result.pageNum>1} ? '' : 'layui-disabled'">上一页</a>

                        <!--                        <a href="javascript:;" class="page-l" th:attr="data-page=${nav},style=${nav == result.pageNum?'background: #66CCFF;color: aliceblue;':''}"-->
                        <!--                           th:each="nav : ${result.pageNavs}">[[${nav}]]</a>-->

                        <!--                        <span class="layui-laypage-curr">-->
                        <!--			<em class="layui-laypage-em"></em>-->
                        <!--			<em th:text="${result.pageNum}"></em>-->
                        <!--		</span>-->

                        <a th:if="${result.pageNum eq result.totalPages && result.pageNum - 4 &gt; 0}"
                           th:text="${result.pageNum - 4}"
                           href="javascript:;" th:attr="data-page=${result.pageNum - 4}"
                           class="layui-laypage-next page-l"></a>

                        <a th:if="${result.pageNum eq result.totalPages && result.pageNum - 3 &gt; 0}"
                           th:text="${result.pageNum - 3}"
                           href="javascript:;" th:attr="data-page=${result.pageNum - 3}"
                           class="layui-laypage-next page-l"></a>

                        <a th:if="${result.pageNum eq result.totalPages - 1 && result.pageNum - 3 &gt; 0}"
                           th:text="${result.pageNum - 3}"
                           href="javascript:;" th:attr="data-page=${result.pageNum - 1}"
                           class="layui-laypage-next page-l"></a>

                        <a th:if="${result.pageNum - 2 &gt; 0}" th:text="${result.pageNum - 2}"
                           href="javascript:;" th:attr="data-page=${result.pageNum - 2}"
                           class="layui-laypage-next page-l"></a>

                        <a th:if="${result.pageNum - 1 &gt; 0}" th:text="${result.pageNum - 1}"
                           href="javascript:;" th:attr="data-page=${result.pageNum - 1}"
                           class="layui-laypage-next page-l"></a>

                        <a th:if="${result.pageNum &gt; 0}" th:text="${result.pageNum}"
                           style="background: #66CCFF;color: aliceblue;"></a>

                        <a th:if="${result.pageNum + 1 &gt; 0 && result.pageNum + 1 &lt; result.totalPages + 1}"
                           th:text="${result.pageNum + 1}"
                           href="javascript:;" th:attr="data-page=${result.pageNum + 1}"
                           class="layui-laypage-next page-l"></a>

                        <a th:if="${result.pageNum + 2 &gt; 0 && result.pageNum + 2 &lt; result.totalPages + 1}"
                           th:text="${result.pageNum + 2}"
                           href="javascript:;" th:attr="data-page=${result.pageNum + 2}"
                           class="layui-laypage-next page-l"></a>

                        <a th:if="${result.pageNum eq 1 && result.pageNum + 3 &lt; result.totalPages + 1}"
                           th:text="${result.pageNum + 3}"
                           href="javascript:;" th:attr="data-page=${result.pageNum + 3}"
                           class="layui-laypage-next page-l"></a>

                        <a th:if="${result.pageNum eq 1 && result.pageNum + 4 &lt; result.totalPages + 1}"
                           th:text="${result.pageNum + 4}"
                           href="javascript:;" th:attr="data-page=${result.pageNum + 4}"
                           class="layui-laypage-next page-l"></a>

                        <a th:if="${result.pageNum eq 2 && result.pageNum + 3 &lt; result.totalPages + 1}"
                           th:text="${result.pageNum + 3}"
                           href="javascript:;" th:attr="data-page=${result.pageNum + 3}"
                           class="layui-laypage-next page-l"></a>


                        <a href="javascript:;" class="layui-laypage-next page-l"
                           th:attr="data-page=${result.pageNum + 1}"
                           th:classappend="${result.pageNum<result.totalPages} ? '' : 'layui-disabled'">下一页</a>
                        <span class="layui-laypage-skip">到第<input type="text" min="1" value="1" class="layui-input">页<button
                                type="button" class="layui-laypage-btn page-submit">确定</button></span>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<!-- 尾部引入 -->
<div th:insert="~{_endbar :: endbar}" id="endbar"></div>
</body>
<script>
    //属性跳转，后面拼接
    function attrSearchCourse(name, val) {
        var href = location.href + "";
        if (href.indexOf("?") != -1) {
            location.href = location.href + "&" + name + "=" + val;
        } else {
            location.href = location.href + "?" + name + "=" + val;
        }
    }

    //三级分类，以及其他
    function searchCourse(name, val) {
        location.href = replaceAndAddParamVal(location.href, name, val)
    }

    //替换url方法
    function replaceAndAddParamVal(url, paramName, replaceVal) {
        //如果没有添加，有替换
        var oUrl = url.toString();
        if (oUrl.indexOf(paramName) != -1) {
            var re = eval('/(' + paramName + '=)([^&]*)/gi');
            var nUrl = oUrl.replace(re, paramName + '=' + replaceVal);
            return nUrl;
        } else {
            var nUrl = "";
            if (oUrl.indexOf("?") != -1) {
                nUrl = oUrl + "&" + paramName + '=' + replaceVal;
            } else {
                nUrl = oUrl + "?" + paramName + '=' + replaceVal;
            }
            return nUrl;
        }

    }

    layui.use(["jquery",'element'],
        function () {
            var $ = layui.$;
            var element = layui.element;
            //搜索按钮
            $("#search-i").on('click',
                function () {
                    var keyword = $("#search-input").val();
                    window.location.href = "http://search.lyfx.com/all-class?keyword=" + keyword;
                })
            //分页 跳转
            $(".page-l").on('click', function () {
                var pn = $(this).attr("data-page");
                var href = location.href;
                location.href = replaceAndAddParamVal(href, "pageNum", pn)
                return false;
            })
            //排序 设置
            $(".sort-l").on('click', function () {
                //layui-btn-danger  removeClass layui-btn-primary
                $(this).toggleClass("desc")
                var sort = $(this).attr("sort");
                if (sort != "") {
                    sort = $(this).hasClass("desc") ? sort + "_desc" : sort + "_asc";
                }
                location.href = replaceAndAddParamVal(location.href, "sort", sort)
                return false;
            })

        })
</script>

</html>